<template>
  <div class="gods">
    <div
      class="goods"
      v-for="(v, index) in arr"
      :key="index"
      @click="fun(v.proid)"
    >
      <img :src="v.img1" alt="" />
      <p>{{ v.proname }}</p>
      <span>￥{{ v.originprice }}</span>
    </div>
  </div>
</template>

<script>
import service from "../../../request/service.js";
export default {
  data() {
    return {
      arr: "",
    };
  },
  mounted() {
    service({
      url: "/api/pro/list",
      method: "GET",
    }).then((res) => {
      // console.log(res.data.data);
      this.arr = res.data.data;
      // console.log(this.arr);
    });
  },
  methods: {
    fun(v) {
      this.$router.push({ path: "/details", query: { id: v } });
      // this.$router.push(`/infogoods/${v}`)
    },
  },
};
</script>

<style scoped>
.gods {
  width: 100%;
  column-count: 2;
  margin-top: 5rem;
}
.goods {
  width: 100%;
  background: #fff;
  margin-bottom: 1.25rem;
  border-radius: 1.25rem;
}
.goods img {
  width: 100%;
  border-radius: 1.25rem;
}
span {
  color: red;
  font-size: 18px;
}
p {
  font-size: 14px;
}
</style>